<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>课程列表</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="/resources/css/base.css" rel="stylesheet"
	type="text/css" />
<link href="/resources/js/miniui/themes/default/miniui.css"
	rel="stylesheet" type="text/css" />
<script src="/resources/js/jquery-1.6.2.min.js"
	type="text/javascript"></script>
<script src="/resources/js/miniui/miniui.js"
	type="text/javascript"></script>

<style type="text/css">
.errorText {
	color: red;
}
#editWindow {top: 50px !important;left:250px!important}
.mini-checkboxlist-item{    float: left;}
</style>
</head>
<body>
	<h1>课程列表</h1>
	<div style="padding-top: 5px; padding-bottom: 5px; width: 95%;">
		<a class="mini-button" img="/resources/js/miniui/themes/icons/add.gif" onclick="load4add()">发布课程</a> 
		<a class="mini-button" img="/resources/js/miniui/themes/icons/edit.gif" onclick="editRow()">编辑课程</a> 
		<a class="mini-button" img="/resources/js/miniui/themes/icons/remove.gif" onclick="delRow()">删除课程</a>
	</div>

	<div id="mini-datagrid" class="mini-datagrid"
		style="width: 95%; height: 400px;"
		url="/course/selectCourseListByPage" pageSize="20" idField="id"
		allowResize="true">

		<div property="columns">
			<div type="indexcolumn">序号</div>
			<div type="checkcolumn">选择</div>
			<div field="type">课程类别</div>
			<div field="title">课程标题</div>
			<div field="desb">简介</div>
			<div field="url">内容链接</div>
			<div field="price">原价(元)</div>
			<div field="price_discount">优惠价(元)</div>
			<div field="phone">联系人</div>
		</div>
	</div>

	<div id="editWindow" class="mini-window" title="发布课程"
		style="width: 400px;left:100px;" showModal="true" allowResize="true"
		allowDrag="true">
		<div id="editform" class="form" enctype="multipart/form-data">
			<input class="mini-hidden" name="id" value="0" />
			<table style="width: 100%; text-align: center;">
				<tr>
					<td style="width: 30%; text-align: right">线上/线下课程：</td>
					<td style="width: 60%; text-align: left;">
						<input name="flag" class="mini-radiobuttonlist" data="[{id: 1, text: '线上课程'}, {id: 2, text: '线下课程'}]"/>						
					</td>
					<td style="width: 10%;" id="type_error" class="errorText"></td>
				</tr>				
				<tr>
					<td style="width: 30%; text-align: right">标题：</td>
					<td style="width: 60%; text-align: left;">
						<input name="title" class="mini-textbox" />
					</td>
					<td style="width: 10%;" id="title_error" class="errorText"></td>
				</tr>
				
				<tr>
					<td style="width: 30%; text-align: right;">类别：</td>
					<td style="width: 60%; text-align: left;">
						<input name="type" class="mini-textbox" />
					</td>
					<td style="width: 10%;" id="type_error" class="errorText"></td>
				</tr>
				<tr>
					<td style="width: 30%; text-align: right;">简介：</td>
					<td style="width: 60%; text-align: left;">
						<input name="desb" class="mini-textbox" />
					</td>
					<td style="width: 10%;" id="desb_error" class="errorText"></td>
				</tr>
				<tr>
					<td style="width: 30%; text-align: right;">内容链接：</td>
					<td style="width: 60%; text-align: left;">
						<input name="url" class="mini-textbox" />
					</td>
					<td style="width: 10%;" id="url_error" class="errorText"></td>
				</tr>
				<tr>
					<td style="width: 30%; text-align: right;">原价：</td>
					<td style="width: 60%; text-align: left;">
						<input name="price" class="mini-textbox" />
					</td>
					<td style="width: 10%;" id="price_error" class="errorText"></td>
				</tr>
				<tr>
					<td style="width: 30%; text-align: right;">特惠价：</td>
					<td style="width: 60%; text-align: left;">
						<input name="price_discount" class="mini-textbox"/>						
					</td>
					<td style="width: 10%;" id="price_discount_error" class="errorText"></td>
				</tr>												
				<tr>
					<td style="width: 30%; text-align: right;">联系方式：</td>
					<td style="width: 60%; text-align: left;">
						<input name="phone" class="mini-textbox"/>						
					</td>
					<td style="width: 10%;" id="phone_error" class="errorText"></td>
				</tr>				
				<tr>
					<td
						style="text-align: center; padding-top: 5px; padding-right: 20px;"
						colspan="3"><a class="mini-button"
						img="/resources/js/miniui/themes/icons/save.gif"
						onclick="saveRow()">保存</a> <a class="mini-button"
						img="/resources/js/miniui/themes/icons/cancel.gif"
						onclick="cancelRow()">取消</a></td>
				</tr>
			</table>
		</div>
	</div>
	
</body>

<script>
mini.parse();
var datagrid = mini.get("mini-datagrid");
var form = new mini.Form("editform");
var editWindow = mini.get("editWindow");

var actionType = "insert";

datagrid.load();

function load4add() {
	actionType = "insert";
	editWindow.show();
	form.clear();
}

function saveRow() {
	var json = form.getData();
	
	$.ajax({
		url : "/course/" + actionType,
		data : json,
		type : "post",
		success : function(text) {
			editWindow.hide();
			datagrid.reload();
		},
		error : function(jqXHR, textStatus, errorThrown) {
			alert(jqXHR.responseText);
		}
	});

}

function editRow() {

	var node = datagrid.getSelected();
	if (node) {
		actionType = "update";
		editWindow.show();
		form.clear();

		$.ajax({
			url : "/course/getById",
			data : {id:node.id},
			type : "post",
			dataType : "json",
			success : function(data) {
				form.setData(node);	
			},
			error : function(jqXHR, textStatus, errorThrown) {
				alert(jqXHR.responseText);
			}
		});	
	} else {
		mini.alert("请选择一条!");
	}
}

function delRow() {

	var node = datagrid.getSelected();
	if (node) {
		mini.confirm("确定删除！", "提示", function(retCode) {
			console.log(retCode);
			if (retCode == 'ok') {
				// dosomething 删除
				$.ajax({
					url : "/course/delete",
					data : {
						id : node.id
					},
					type : "post",
					dataType : "json",
					success : function() {
						editWindow.hide();
						datagrid.reload();
					},
					error : function(jqXHR, textStatus, errorThrown) {
						alert(jqXHR.responseText);
					}
				});

			}
		})
	} else {
		mini.alert("请选择一条!");
	}
}

function cancelRow() {
	datagrid.reload();
	editWindow.hide();
}
</script>

</html>
